<template>
    <div class="work-nav-eash">
        <div class="echarts-box">
            <div>近期一周保修量趋势</div>
            <div id="container" style="height: 100%;width: 100%;"></div>
        </div>
        <div class="nav-box">
            <div class="nav-box-bianjie">
                <div>
                    便捷导航
                </div>
                <div class="nav-box-eash">
                    <div v-for="item in navEach">{{ item.name }}</div>
                    <div class="add-nav">+添加</div>
                </div>
            </div>
            <div class="nav-box-beiwang">
                <div style="margin-bottom: 20px;">备忘录</div>
                <el-input type="text" placeholder="请输入..." />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";
import { useHomeStore } from "@/stores/HomeStore";
import { storeToRefs } from "pinia";
const homeStore = useHomeStore();
const { navEach } = storeToRefs(homeStore);
const { getnavEach } = homeStore;
getnavEach();
onMounted(() => {
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
    });
    var option;
    option = {
        xAxis: {
            type: "category",
            data: [
                "04-01",
                "04-02",
                "04-03",
                "04-04",
                "04-05",
                "04-06",
                "04-07"
            ],
        },
        yAxis: {
            type: "value",
            data: [[
                500,
                400,
                300,
                200,
                100,
                0
            ]]
        },
        series: [
            {
                //smooth: true,//平滑曲线
                data: [150, 230, 224, 218, 135, 147, 260],
                type: "line",
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(5, 115, 233, 0.3)",
                        },
                        {
                            offset: 1,
                            color: "rgba(5,114,233,0)",
                        },
                    ]),
                },
            },
        ],
    };
    if (option && typeof option === "object") {
        myChart.setOption(option);
    }
});
</script>

<style scoped>
@import url('@/assets/Home/Home.css');
</style>